<template>

  <el-container>
    <el-header>  <el-divider content-position="left">网口信息修改</el-divider></el-header>
    <el-main>
      <div class="app-container " style="display: flex;flex-direction: row; align-items: center;justify-content: center">

        <div style="width: 600px; height:650px;padding: 20px"   v-for="(item,index) in networkList" :key="index">
          <el-divider content-position="left">{{'LAN'+(index+1)+`(${item.networkName})`}}</el-divider>
          <el-form  :ref="'form'+index"  :model="networkList[index]" label-position="top" label-width="100px"  >
            <el-form-item label="DHCP" prop="dhcp4" label-position="left" label-width="50px" >
              <el-switch v-model="item.dhcp4"
                         :active-value="true"
                         :inactive-value="false"
                         @change="toggleDHCP(index)"
              />
            </el-form-item>
            <el-form-item label="IP" prop="addresses" :rules="item.dhcp4 ? [] : rules.addresses" >
              <el-input v-model="item.addresses[0]" :placeholder="item.dhcp4?'':'192.168.1.100'" :disabled="item.dhcp4" />
            </el-form-item>
            <el-form-item  label="子网掩码"   prop="subnetMask" :rules="item.dhcp4 ? [] : rules.subnetMask" >
              <el-input v-model="item.subnetMask" :placeholder="item.dhcp4?'':'255.255.255.0'" :disabled="item.dhcp4"  />
            </el-form-item>
            <el-form-item label="默认网关" prop="gateway4"  >
              <el-input  v-model="item.gateway4"  :placeholder="item.dhcp4?'':'192.168.1.1'" :disabled="item.dhcp4" />
            </el-form-item>
            <el-form-item label="DNS" prop="nameservers.dns"  >
              <el-input  v-model="item.nameservers.dns"  :disabled="item.dhcp4" :placeholder="item.dhcp4?'':'8.8.8.8'"  />
            </el-form-item>
            <el-button   type="primary" @click="submit(index)">确认</el-button>
          </el-form>
        </div>
        <el-empty description="未获取到网口信息" v-if="networkList.length == 0"/>
        <div style="width: 600px; height:650px;padding: 20px"   v-for="(item,index) in wifiList" :key="index">
          <el-divider content-position="left">{{'Wi-Fi'+(index+1)+`(${item.networkName})`}}</el-divider>
          <el-form  :ref="'form-wifi'+index"  :model="wifiList[index]" label-position="top" label-width="100px"  >
            <el-form-item label="DHCP" prop="dhcp4"  label-position="left" >
              <el-switch v-model="item.dhcp4"
                         :active-value="true"
                         :inactive-value="false"
                         @change="toggleWifiDHCP(index)"
              />
            </el-form-item>
            <el-form-item label="IP" prop="addresses" :rules="item.dhcp4 ? [] : rules.addresses" >
              <el-input v-model="item.addresses[0]" :placeholder="item.dhcp4?'':'192.168.1.100'" :disabled="item.dhcp4" />
            </el-form-item>
            <el-form-item  label="子网掩码" prop="subnetMask" :rules="item.dhcp4 ? [] : rules.subnetMask">
              <el-input v-model="item.subnetMask"  :placeholder="item.dhcp4?'':'255.255.255.0'" :disabled="item.dhcp4"  />
            </el-form-item>
            <el-form-item label="默认网关" prop="gateway4"  >
              <el-input  v-model="item.gateway4" :placeholder="item.dhcp4?'':'192.168.1.1'" :disabled="item.dhcp4" />
            </el-form-item>
            <el-form-item label="DNS" prop="nameservers.dns"  >
              <el-input  v-model="item['nameservers']['dns']"  :placeholder="item.dhcp4?'':'8.8.8.8'" :disabled="item.dhcp4"  />
            </el-form-item>
            <el-form-item label="Wi-Fi" prop="access-points.ssid"  :rules="[{required: true, message: '请输入正确的Wi-Fi名称', trigger: ['blur', 'change']}]" >
              <el-input  v-model="item['access-points'].ssid"  placeholder="SSID" />
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input  type="password" v-model="item['access-points'].password"  show-password placeholder="password" />
            </el-form-item>
            <el-button    type="primary" @click="submitWifi(index)">确认</el-button>
          </el-form>
        </div>
      </div>

    </el-main>

  </el-container>

</template>

<script setup>
import {getNetworkList,updateNetWork,getWifiList,updateWifi} from '@/api/network'
const { proxy } = getCurrentInstance();
const form =ref({})
const networkList =ref([])
const wifiList =ref( [])
const loading =ref(false)
const rules =  {
  addresses: [
    { required: true,
      pattern: /^((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.){3}(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])$/,
      message: "请输入正确的IP地址", trigger: "blur"}

  ],
  gateway4: [
    { required: true,   pattern: /^((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.){3}(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])$/, message: '请输入正确的网关', trigger: 'blur' }
  ],
  nameservers: [
    { required: true, message: '请输入正确的DNS', trigger: ['blur', 'change']  }
  ],
  subnetMask: [
    // 255.255.255.255
    // 255.255.255.254
    // 255.255.255.252
    // 255.255.255.248
    // 255.255.255.240
    // 255.255.255.224
    // 255.255.255.192
    // 255.255.255.128
    // 255.255.255.0
    // 255.255.0.0
    { required: true,pattern: /^(255\.255\.255\.255|255\.255\.255\.254|255\.255\.255\.252|255\.255\.255\.248|255\.255\.255\.240|255\.255\.255\.224|255\.255\.255\.192|255\.255\.255\.128|255\.255\.255\.0|255\.255\.0\.0)$/,  message: '请输入正确的子网掩码', trigger: 'blur' }
  ],
  ssid: [
    { required: true, message: '请输入正确的Wi-Fi名称', trigger: 'blur' }
  ],
}

function getList(){
  getNetworkList().then(res=>{
    networkList.value = res.data ||[]
    networkList.value.map(item=>{
      if (item.addresses.length==0){
        item.addresses[0] =null;
      }
      if (item.nameservers.addresses.length!=0){
        item.nameservers.dns =item.nameservers.addresses[0];
      }
    })
  });
  getWifiList().then(res=>{
    wifiList.value = res.data ||[]
    wifiList.value.map(item=>{
      if (item.addresses.length==0){
        item.addresses[0] =null;
      }
      if (item.nameservers.addresses.length!=0){
        item.nameservers.dns =item.nameservers.addresses[0];
      }
      // if (item.nameservers.addresses.length==0){
      //   item.nameservers.addresses[0] =null;
      // }
    })
  })
}
function submit(index){
  loading.value  = true
  let formref = 'form'+index;
  proxy.$refs[formref][0].validate((valid) => {
    let address = [];
    if(networkList.value[index].nameservers.dns){
      address.push(networkList.value[index].nameservers.dns)
    }
    if (valid) {updateNetWork({networkName:networkList.value[index].networkName,
      addresses:networkList.value[index].addresses,gateway4:networkList.value[index].gateway4,
      subnetMask:networkList.value[index].subnetMask,
      dhcp4:networkList.value[index].dhcp4,
      nameservers:{addresses:address}}).then(res => {
      loading.value  = false
      proxy.$modal.msgSuccess("修改成功");
      getList();
    })
    } else {
      loading.value  = false
      return false;
    }
  });
}
function submitWifi(index){
  loading.value  = true










  let formref = 'form-wifi'+index;
  proxy.$refs[formref][0].validate((valid) => {
    console.log('.........valid',valid)
    let address = [];
    if(wifiList.value[index].nameservers.dns){
      address.push(wifiList.value[index].nameservers.dns)
    }
    if (valid) {updateWifi({networkName:wifiList.value[index].networkName,
      addresses:wifiList.value[index].addresses,
      gateway4:wifiList.value[index].gateway4,
      subnetMask:wifiList.value[index].subnetMask,
      dhcp4:wifiList.value[index].dhcp4,
      nameservers:{addresses:address},
      "access-points":{ssid:wifiList.value[index]['access-points'].ssid,password:wifiList.value[index]['access-points'].password}
    }).then(res => {
      loading.value  = false
      proxy.$modal.msgSuccess("修改成功");
      getWifiList();
    })
    } else {
      loading.value  = false
      return false;
    }
  });
}
function toggleDHCP(index){
  const item =networkList.value[index];
  // 保存当前 dhcp4 的值
  const currentDhcp4 = item.dhcp4;
  // 重置表单验证状态
  proxy.$refs[`form${index}`][0].resetFields();
  // 恢复 dhcp4 的值
  item.dhcp4 = currentDhcp4;
  if (item.dhcp4) {
    // Clear the values when DHCP is enabled
    item.addresses = [];
    item.subnetMask = '';
    item.gateway4 = '';
    item.dns = '';
    item.nameservers = { addresses: [] };
  }
}
function  toggleWifiDHCP(index) {
  const item =wifiList.value[index];
  // 保存当前 dhcp4 的值
  const currentDhcp4 = item.dhcp4;
  // 重置表单验证状态
  proxy.$refs[`form-wifi${index}`][0].resetFields();
  // 恢复 dhcp4 的值
  item.dhcp4 = currentDhcp4;
  if (item.dhcp4) {
    // Clear the values when DHCP is enabled
    item.addresses = [];
    item.subnetMask = '';
    item.gateway4 = '';
    item.dns = '';
    item.nameservers = { addresses: [] };
  }
}
// function updateWifiName(index){
//   wifiList.value[index]['access-points'].ssid = 'a'
// }
getList();
</script>

<style lang='scss' scoped>

</style>
